<template>
  <div class="chart-container">
    <div class="search-wrapper">
      <px-select-v2
        v-show="!fenxidivflg"
        v-model="selectedNode"
        :options="nodeList"
        clearable
        filterable
        placeholder="请选择指标"
        @change="selectNodeHandle"
      >
        <template #default="{ item }">
          <px-tooltip :content="item.label" placement="top" :disabled="!item.isOverflow">
            <div class="truncate" @mouseover="checkOverflow($event, item)" @mouseleave="item.isOverflow = false">
              {{ item.label }}
            </div>
          </px-tooltip>
        </template>
      </px-select-v2>
    </div>
    <echartsDom :options="chartOptions" @dataConfig="dataConfig" />
    <div v-show="fenxidivflg" class="fenxidiv">
      <fenxidiv :centerIndicator="centerIndicator" @closeDig="closeDig" />
    </div>
  </div>
</template>
<script setup lang="tsx">
defineOptions({
  name: "INDICATOR_MATRIX_CHART"
});
import { ref, onMounted, computed, reactive, markRaw } from "vue";
import { useRouter } from "vue-router";
import { useRouterStoreHook } from "@/store/modules/router";
import echartsDom from "../components/echartsDom.vue";
import { queryAllIndicatorMatrix, queryqueryAllCenterIds, queryalgorithmMatrix } from "@/api/modules/indicator";
import fenxidiv from "./fenxi.vue";

const chartOptions = ref(null);
const chartRef = ref(null);
const centerIndicator = ref([]);
const fenxidivflg = ref(false);
const initChart = graph => {
  let nodes = [];
  graph.nodeDtos.forEach(v => {
    let symbolSize = 20;
    if (v.category == 0) {
      symbolSize = 30;
    }
    nodes.push({
      ...v,
      name: v.indicatorName,
      symbolSize
    });
  });
  graph.nodeDtos.forEach(function (node) {
    node.label = {
      show: node.value > 30
    };
  });
  let links = [];
  graph.linkDtos.forEach(function (link) {
    links.push({
      source: link.source - 1,
      target: link.target - 1
    });
  });
  chartOptions.value = {
    // title: {
    //   text: "指标影响矩阵关系图",
    //   left: 'center', // 水平居中
    //   top: 0,
    // },
    grid: {
      top: "10%", // 图表顶部边距
      left: "10%", // 图表左侧边距
      right: "20%", // 图表右侧边距
      bottom: "10%", // 图表底部边距
      containLabel: true // 确保坐标轴标签在 grid 内
    },
    tooltip: {},
    legend: [
      {
        right: 10,
        top: 0,
        // selectedMode: 'single',
        data: graph.graphDtos.map(function (a) {
          return a.name;
        })
      }
    ],
    series: [
      {
        type: "graph",
        layout: "force", // 使用力导向布局
        data: nodes,
        links: links,
        categories: graph.graphDtos,
        roam: true,
        label: {
          show: true
          // position: function (data) {
          //   // 根据节点的大小动态调整标签的位置
          //   // 这里简单地示例为向下偏移，根据需要可以更复杂地计算位置
          //   return data.symbolSize < 60 ? 'bottom' : 'inside'; // 向下偏移，并考虑节点大小
          // },
          // normal: {

          // formatter: function (params) {
          //   // 根据节点大小动态调整字体大小
          //   var size = params.data.symbolSize;
          //   var fontSize = size > 60 ? 14 : 12;
          //   return params.data.name;
          // },
          // textStyle: {
          //   fontSize: function (params) {
          //     var size = params.data.symbolSize;
          //     var fontSize = size > 60 ? '14px' : '12px';
          //     return fontSize;
          //   }
          // },
          // }
        },
        legendHoverLink: false,
        force: {
          // 力导向布局的配置项，可以调整以改变布局效果
          repulsion: 600, // 节点之间的斥力
          edgeLength: [50, 100], // 边的长度范围
          layoutAnimation: false
        },
        edgeSymbol: ["circle", "arrow"], // 线的箭头
        edgeSymbolSize: [5, 7], // 箭头大小
        // label: {
        //   position: "right",
        //   formatter: "{b}"
        // },
        scaleLimit: {
          min: 1.5,
          max: 5
        },
        lineStyle: {
          color: "source",
          curveness: 0.3
        },
        emphasis: {
          focus: "adjacency",
          lineStyle: {
            width: 10
          }
        }
      }
    ]
  };
};
const nodeList = ref([]);
const selectedNode = ref(null);
onMounted(() => {
  queryqueryAllCenterIds({ classType: 1 }).then(res => {
    console.log(res);
    nodeList.value = res.map(item => ({ value: item.id, label: item.name }));
    selectedNode.value = nodeList.value[0].value;
    queryalgorithmMatrix({ id: nodeList.value[0].value }).then(res => {
      console.log(res);
      initChart(res);
    });
  });
  // queryAllIndicatorMatrix({ classType: 1 }).then(res => {
  //   let nodes = res.nodeDtos.filter(v => v.category == 0);
  //   // nodeList.value = nodes.map(item => ({ value: item.id, label: item.indicatorName }));
  //   initChart(res);
  //   // 默认第一个节点
  //   setTimeout(() => {
  //     selectedNode.value = nodeList.value[0].value;
  //     selectNodeHandle();
  //   }, 1000);
  // });
});
const selectNodeHandle = () => {
  // chartOptions.value.series[0].data.map(v => {
  //   if (v.id == selectedNode.value) {
  //     v.isCenter = true;
  //   } else {
  //     v.isCenter = false;
  //   }
  // });
  // chartOptions.value = { ...chartOptions.value };
  queryalgorithmMatrix({ id: selectedNode.value }).then(res => {
    console.log(res);
    initChart(res);
  });
};
const checkOverflow = (event, item) => {
  const element = event.target;
  item.isOverflow = element.scrollWidth > element.clientWidth;
};
// 数据分析
const dataConfig = jobId => {
  console.log(jobId);
  if (jobId.category == 0) {
    if (jobId.centerId == selectedNode.value) {
      centerIndicator.value = jobId;
      console.log(jobId);
      fenxidivflg.value = true;
    } else {
      selectedNode.value = Number(jobId.centerId);
      selectNodeHandle();
    }
  }
};
const closeDig = val => {
  fenxidivflg.value = val;
};
</script>
<style lang="scss" scoped>
.chart-container {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  // position: relative;
  // height: 100%;
  background: #fff;
  // .chart{
  //   width:100%;
  //   position: relative;
  //   height: 100%;
  //   >div{
  //     width: 100%;
  //     height: 100%;
  //   }
  // }
  .search-wrapper {
    position: absolute;
    top: 30px;
    left: 44px;
    z-index: 50;
  }
}

.fenxidiv {
  position: absolute;
  top: 14px;
  left: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  padding: 20px;
  background: white;
}
</style>
